<template>
    <view class="m-input">
        <input :placeholder="placeholder" :disabled="disabled" :value="value" :maxlength="maxlength" :type="inputType" :password="type==='password'? true : false"
               @input="onInput"></input>
        <slot class="i-btn">

        </slot>
    </view>
</template>

<script>
    export default{
        name:"m-registerInput",
        data(){
            return{

            }
        },
        props:{
            placeholder:String,
            value:String,
            maxlength:String,
            type:String,
            disabled:String
        },
        model: {
            prop: 'value',
            event: 'input'
        },
        computed:{
            inputType(){
                if(this.type==='password'){
                    return "text"
                }else if(this.type==="account"){
                    return "number"
                }else if(this.type==="authCode"){
                    return "number"
                }
            }
        },
        methods:{
            onInput(e){
                this.$emit("input",e.target.value)
            }
        }
    }
</script>

<style lang="less" scoped>
    .m-input{
        width: 700rpx;
        margin: 0 auto;
        display: flex;
        // border-bottom: solid 1px rgba(0,0,0,0.2);
        input{
            // box-sizing: border-box;
            font-size: 28rpx;
            padding: 60rpx 20rpx 15rpx 20rpx;
            flex-grow: 1;
            border-bottom: solid 1px rgba(0,0,0,0.2);
        }

    }
</style>
